<div class="layui-form hisi-search">
    <form class="layui-form" action="{:url()}" method="get" id="searchForm">
        <div class="layui-form-item">
            <label class="layui-form-label">反馈类型</label>
            <div class="layui-input-inline">
                <select name="type">
                    <option value="">选择类型</option>
                    <option value="问题反馈">问题反馈</option>
                    <option value="意见建议">意见建议</option>
                    <option value="我要求片">我要求片</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item hisi-search-btn">
            <div class="layui-input-inline">
                <button type="submit" class="layui-btn layui-btn-normal layui-icon layui-icon-search">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary layui-icon layui-icon-delete">重置</button>
            </div>
        </div>
    </form>
</div>
<div class="layui-form">
    <table id="table"></table>
    <script type="text/html" id="statusTpl">
        <input type="checkbox" name="status" value="{{ d.status }}" lay-skin="switch" lay-filter="switchStatus" lay-text="启用|禁用" {{ d.status == 1 ? 'checked' : '' }} data-href="{:url('status')}?hisiModel=banner&id={{ d.id }}">
    </script>
    <script type="text/html" title="操作按钮模板" id="buttonTpl">
        <a href="{:url('add')}?id={{ d.id }}&val=2" {{ d.status == 1 ? '' : 'style="display:none"' }} class="layui-btn layui-btn-xs layui-btn-normal">修改</a>
    </script>
</div>
{include file="system@block/layui" /}
<script type="text/javascript">
    layui.use(['jquery', 'laydate', 'table'], function() {
        var $ = layui.jquery, laydate = layui.laydate, table = layui.table;
        table.render({
            elem: '#table'
            ,url: '{:url()}' //数据接口
            ,page: true //开启分页
            ,limit: 15
            ,limits:[15, 30, 50, 100, 200]
            ,cellMinWidth: 90
            ,text: {
                none : '暂无相关数据'
            }
            ,cols: [[ //表头
                {field: 'type', title: '类型', width:100}
                ,{field: 'content', title: '内容', width:100}
                ,{field: 'contact', title: '联系方式', width:100}
                ,{field: 'imgs', title: '图片', width:100, templet: function(d){
                    if (d.imgs.length > 0) {
                        var html = '';
                        d.imgs.forEach((v,k) => {
                            html += '<div style="line-height:18px;">';
                            html += '<img class="review" src="'+ v +'" width="60" height="60" class="fl"></div>';
                        });
                        return html;
                    }else{
                        return '无图片';
                    }
                }}
                ,{field: 'create_time', title: '创建时间', width: 200, sort: true}
            ]]
        });

        // 筛选
        $('#searchForm').submit(function(){
            var that = $(this), arr = that.serializeArray(), whereObj = {};
            for(var i in arr) {
                whereObj[arr[i].name] = arr[i].value;
            }
            
            table.reload('table', {
              url: '{:url()}',
              where: whereObj
            });
            return false;
        });

        $('body').on('click', '.review' ,function(){
            var _this = $(this);
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: '800px',
                shadeClose: true,
                content: '<div id="img" style="z-index: 19891015;text-align: center;"><img style="width:100%;" src="'+_this.attr('src')+'"></div>'
            });
        })

        laydate.render({
            elem: '#dateFilter'
            ,range: true
        });
    });
</script>